<template>
  <div id="Recommend">
    <div v-for="(item,index) in this.recommend" :key="item.sort" class="recommend-item">
      <a :href="item.link" @click="autumnRouter(index,$event)">
        <img :src="item.image" :key="item.sort" alt="">
        <div>{{item.title}}</div>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "RecommendView",
    props: {
      recommend: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    data() {
      return {
        currentIndex: 0
      };
    },
    methods: {
      autumnRouter(index,$event) {
        this.switch_num(index);

        $event.preventDefault();
      },
      switch_num(index) {
        switch (index + 1) {
          case 1:
            break;
          case 2:
            break;
          case 3:
            this.$router.push("/Beauty");
            break;
          case 4:
            this.$router.push("/autumn");
            break;
        };
      }
    }
  }
</script>

<style scoped>
  #Recommend{
    display: flex;
    text-align: center;
    background-color: white;
    padding: 10px 0;
  }
  .recommend-item{
    flex: 1;
  }
  .recommend-item a img{
    width: 75px;
    height: 75px;
    margin-bottom: 10px;
    border-radius: 50%;
  }
</style>